<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="format-detection" content="telephone=no">
    <meta name="HandheldFriendly" content="True">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
	<style>
        body,div {margin: 0; padding: 0;}
        body{background: #b30c20;}
        #iphone {display: none; margin: 0 auto;}
        #android {display: none; margin: 0 auto;}
		#iphone img{width: 100%;}
		#android img{width: 100%;}
		#downloadPage{
			display: none;
			position: fixed;
			background: #dd2523;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;
		}
		#downloadPage .img img{
			width: 100%;
		}
		#downloadPage .btn{
			display: flex;
			align-items: center;
			justify-content: center;
			flex-grow: 1;
			align-self: stretch;
		}
		#downloadPage .btn .downloadlnk{
			height: 50px;
			background: #FFF;
			border-radius: 50px;
			color: #dd2523;
			line-height: 50px;
			text-align: center;
			flex-grow: 1;
			margin: 0 15%;
		}
		#downloadPage .panel{
			position:absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.3);
			z-index: 2;
			display: none;
			align-items: center;
			justify-content: center;
		}
		#downloadPage .panelerror{
			position:absolute;
			top: 0;
			bottom: 0;
			right: 0;
			left: 0;
			background: rgba(0, 0, 0, 0.3);
			z-index: 2;
			display: none;
			align-items: center;
			justify-content: center;
		}
		#downloadPage .panel #loginForm{
			background: #FFF;
			width: 90%;
			border-radius: 10px;
			padding: 30px 0;
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		#downloadPage .panelerror #loginForm{
			background: #FFF;
			width: 90%;
			border-radius: 10px;
			padding: 30px 0;
			display: flex;
			align-items: center;
			flex-direction: column;
		}
		#downloadPage .panelerror #loginForm .li{
			flex-grow: 1;
			align-self: stretch;
			padding: 0 30px;
			margin-bottom: 20px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			font-size: 20px;
		}
		#downloadPage .panel #loginForm .li{
			flex-grow: 1;
			align-self: stretch;
			padding: 10px 30px;
			margin-bottom: 20px;
			display: flex;
			font-size: 18px;
		}
		#downloadPage .panelerror #loginForm .li div{
			text-align: center;
			flex-shrink: 0;
			font-size: 18px;
		}
		#downloadPage .panelerror #loginForm .li .ss{
			margin-bottom: 20px;
		}
		#downloadPage .panelerror #loginForm .li .submit2{
			flex-grow: 1;
			line-height: 50px;
			height: 50px;
			background: #dd2523;
			border-radius: 6px;
			color: #FFF;
			text-align: center;
		}
		#downloadPage .panel #loginForm .li input{
			padding: 0;
			flex-grow: 1;
			border:1px solid #DDD;
			border-radius: 6px;
			text-indent: 15px;
			height: 50px;
			font-size: 18px;
		}
		#getCode{
			margin-left: 6px;
			flex-shrink: 0;
			border-radius: 6px;
			background: #dd2523;
			border: none;
			padding: 0 10px;
			color: #FFF;
		}
		#code{
			flex-grow: 0;
		}
		.submit1{
			flex-grow: 1;
			line-height: 50px;
			height: 50px;
			background: #dd2523;
			border-radius: 6px;
			color: #FFF;
			text-align: center;
		}
		.panel{
			display: none;
		}
    </style>
    <title>丽华快餐-领取现金券</title>
</head>
<body>
<div id="iphone"><img src="/assets/img/appios.jpg" /></div>
<div id="android"><img src="/assets/img/appand.jpg" /></div>
<input id='android_downloadurl' type="hidden" value="">
<div id='downloadPage'>
	<div class="img" id="get_btn"><img src="/assets/img/vvv.png?v=2" /></div>
	<input type="hidden" value="{$error}" name='error' id='error' />

	<div class="panel">
		<form id="loginForm">
			<div class="li">
				<input id="phone" name="phone" type="number" placeholder="您的手机号" />
			</div>
			<div class="code li">
				<input id="code" name="code" type="number" class="smscode" placeholder="短信验证码" />
				<button type="button" id="getCode" class="codebtn">获取验证码</button>
				<input type="hidden" value="{$sn}" name='sn' id='sn' />
			</div>
			<div class="li">
				<div type="submit" class="submit1">确定领取</div>
			</div>
		</form>
	</div>

	<div class="panelerror">
		<form id="loginForm">
			<div class="li">
				<div class="ss">{$error}</div>
				<div  class="submit2 use_lnk">去使用现金券</div>
			</div>
	</div>
</div>

<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
<script>
	var canGetCode = true;
    var setTimeOut = null;
	var t = null;
	var android_scheme_url = "lihuaapp://";
	var ios_appstore_url = "https://apps.apple.com/cn/app/%E4%B8%BD%E5%8D%8E%E5%BF%AB%E9%A4%90/id628351424";//
	var android_downloadurl = "";
	$(function(){
		
		//判断当前所在的平台
		var ua = navigator.userAgent.toLowerCase();
		var iOS = ( ua.match(/(ipad|iphone|ipod)/g) ? true : false );
		var android = ( ua.match(/android/i) ? true : false );
		var wx = ( ua.match(/micromessenger/i) ? true : false );
		// android_downloadurl = $("#android_downloadurl").val();
		android_downloadurl = 'https://api.lihua.com/static/app/lihua_app_android.apk';
		// android_downloadurl = 'https://api.lihua.com/static/app/lihua_app_6.0.0.apk';

		//此时还是微信页面，可以直接提示用户在浏览器打开
		if (wx) {
			// if (iOS) {
			// 	document.getElementById('iphone').style.display = 'block';
			// } else if (android) {
			//     document.getElementById('android').style.display = 'block';
			// }
		}else{
			/**
			 * 此时已在浏览器页面打开页面
			 * **/
			// document.getElementById('downloadPage').style.display = 'flex';
			if (iOS) {
			    //之前已经尝试过Universal Links打开app失败了，此处不错尝试，直接打开appstore
				// window.location = ios_appstore_url;
			} else if (android) {
				//android需要尝试scheme方式打开app
				// openAndroidClient(android_scheme_url);
			}
		}
		document.getElementById('downloadPage').style.display = 'flex';
		$("#downloadlnk").click(function(){
			if (iOS) {
				window.location = ios_appstore_url;
			} else if (android) {
				window.location = android_downloadurl;
			}
		})

		var errors = $("#error").val();

		$("#get_btn").click(function(){
			if(!!errors) return;
			$(".panel").show();
			$(".panel").css("display","flex");
		})

		$(".submit1").click(function () {
            var phone = $("#phone").val();
            var code  = $("#code").val();
            var sn  = $("#sn").val();
            if (phone && code) {
                $.post("/hongbao/index/login_voucher", {phone: phone, code: code, sn: sn}, function (ret) {
                    if (ret.code === 1) { 
						// window.location.reload();
						// 跳转到voucherlist页面
						window.location.href = "http://192.168.0.138:8888/hongbao/index/voucherlist?p="+phone;
					} else { 
						alert(ret.msg); 
					} 
                });
            } else {
                alert("请填写手机号和验证码");
            }
            return false;
        });

		$(".use_lnk").click(function () {
			// alert(1);
			use_lnk_fn();
		});

        $("#getCode").click(function () {
            if (canGetCode) {
                var phone = $("#phone").val();
                if (checkPhone(phone)) {
                    timeOut();
                    getCode(phone);
                } else {
                    alert("请输入正确的手机号");
                }
            } else {
                alert("若未收到短信验证码，请稍后再试")
            }
        });
		$("#clickuse").click(function () {
			use_lnk_fn();
		})

		console.log(errors);
		if(!!errors){
			$(".panelerror").show();
			$(".panelerror").css("display","flex");
		}
		
	})

	function use_lnk_fn(){
		// alert(2);
		//判断当前平台
		var android_scheme_url = "lihuaapp://";
		var ios_scheme_url = "lihuaapp://";
		var ios_appstore_url = "https://itunes.apple.com/cn/app/li-hua-kuai-can/id628351424";
		var ua = navigator.userAgent.toLowerCase();
		// alert(ua);
		var iOS = ( ua.match(/(ipad|iphone|ipod)/g) ? true : false );
		var android = ( ua.match(/android/i) ? true : false );
		// alert(iOS);
		// alert(android);
		var applink, url;
		// alert(iOS);
		// alert(android);
		if (iOS) {
			// url = "https://www.lihua.com/newapp/"; //Universal Links
			// openIOSclient(url);
			window.location.href = ios_appstore_url;
		} else {
			window.location.href = "lihuaapp://";
		}
		setTimeout(() => {
			window.location.href = "https://newapp.lihua.com/hongbao/index/download";
		}, 500);
	}

	function openAndroidClient(url) {
		window.location.href = url;
	}

	//倒计时
    function timeOut() {
        $("#getCode").text("60秒");
        var time = 60;
        setTimeOut = setInterval(function () {
            time--;
            $("#getCode").text(time + "秒");
            if (time === 0) {
                canGetCode = true;
                clearInterval(setTimeOut);
            }
        }, 1000);
    }

	//打开ios app软件
	function openIOSclient(url) {
		// alert(url);
		var ifr = document.createElement('iframe');
		ifr.src = url;
		ifr.style.display = 'none';
		document.body.appendChild(ifr);
		clearTimeout(t);
		t = setTimeout(function() {
			// alert(downloadurl);
		    window.location = url;
		}, 2000);
		window.onblur = function() {
		    clearTimeout(t);
		}
	}

    //获取地址栏参数
    function getQueryString(name) {
        var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r != null) return unescape(r[2]);
        return null;
    }

    //获取验证码
    function getCode(phone) {
        canGetCode = false;
        $.post("https://newapp.lihua.com/api/sms/send", {mobile: phone, event: 'login'});
    }

    //验证手机号
    function checkPhone(phone) {
        var myreg = /^[1][0-9]{10}$/;
        return myreg.test(phone);
    }


</script>
</body>
</html>
